<template>
  <view class="services-page">
    <!-- 顶部轮播图 -->
    <view class="banner-section">
      <u-swiper
        :list="bannerList"
        :autoplay="true"
        :interval="3000"
        :circular="true"
        height="180px"
        @click="handleBannerClick"
      ></u-swiper>
    </view>
    
    <!-- 快捷服务网格 -->
    <view class="service-grid">
      <view 
        v-for="service in serviceList" 
        :key="service.id"
        class="service-item"
        @click="handleService(service)"
      >
        <view class="service-icon" :style="{ background: service.color }">
          <u-icon :name="service.icon" color="#fff" size="20"></u-icon>
        </view>
        <text class="service-text">{{ service.text }}</text>
      </view>
    </view>
    
    <!-- 动态菜单 -->
    <view class="dynamic-menu-section">
      <u-card title="功能菜单" :border="false">
        <DynamicMenu />
      </u-card>
    </view>
    
    <!-- 最新公告 -->
    <view class="announcement-section">
      <u-card title="最新公告" :border="false">
        <view class="announcement-list">
          <view 
            v-for="announcement in announcements" 
            :key="announcement.id"
            class="announcement-item"
            @click="viewAnnouncement(announcement)"
          >
            <view class="announcement-content">
              <text class="announcement-title">{{ announcement.title }}</text>
              <text class="announcement-time">{{ announcement.time }}</text>
            </view>
            <view class="announcement-badge" v-if="announcement.isTop">
              <u-tag text="置顶" type="warning" size="mini"></u-tag>
            </view>
          </view>
        </view>
      </u-card>
    </view>
    
    <!-- 热门活动 -->
    <view class="activity-section">
      <u-card title="热门活动" :border="false">
        <view class="activity-list">
          <view 
            v-for="activity in hotActivities" 
            :key="activity.id"
            class="activity-item"
            @click="viewActivity(activity)"
          >
            <image class="activity-image" :src="activity.image" mode="aspectFill"></image>
            <view class="activity-info">
              <text class="activity-title">{{ activity.title }}</text>
              <text class="activity-time">{{ activity.time }}</text>
              <view class="activity-status">
                <u-tag :text="activity.statusText" :type="activity.statusType" size="mini"></u-tag>
              </view>
            </view>
          </view>
        </view>
      </u-card>
    </view>
    
    <!-- 便民服务 -->
    <view class="convenience-section">
      <u-card title="便民服务" :border="false">
        <view class="convenience-list">
          <view 
            v-for="service in convenienceServices" 
            :key="service.id"
            class="convenience-item"
            @click="handleConvenienceService(service)"
          >
            <view class="service-info">
              <u-icon :name="service.icon" :color="service.color" size="24"></u-icon>
              <view class="service-details">
                <text class="service-name">{{ service.name }}</text>
                <text class="service-desc">{{ service.description }}</text>
              </view>
            </view>
            <u-icon name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
      </u-card>
    </view>
  </view>
</template>

<script setup>
/**
 * 社区服务页面
 * @author Wu.Liang
 * @date 2025-01-21
 */

import { ref, reactive, onMounted } from 'vue'
import DynamicMenu from '@/components/DynamicMenu.vue'
import { hasMenuPermission } from '@/utils/permission'

// 轮播图数据
const bannerList = ref([
  {
    image: '/static/images/banner1.jpg',
    title: '社区活动',
    url: '/pages/services/activity'
  },
  {
    image: '/static/images/banner2.jpg',
    title: '便民服务',
    url: '/pages/services/convenience'
  },
  {
    image: '/static/images/banner3.jpg',
    title: '社区公告',
    url: '/pages/services/announcement'
  }
])

// 服务列表配置
const serviceList = reactive([
  {
    id: 'announcement',
    text: '社区公告',
    icon: 'file-text',
    color: '#3742fa',
    action: 'announcement'
  },
  {
    id: 'activity',
    text: '活动报名',
    icon: 'calendar',
    color: '#2ed573',
    action: 'activity'
  },
  {
    id: 'service',
    text: '便民服务',
    icon: 'tools',
    color: '#ff9500',
    action: 'service'
  },
  {
    id: 'group-buy',
    text: '社区团购',
    icon: 'shopping-cart',
    color: '#ff4757',
    action: 'group-buy'
  },
  {
    id: 'mutual-aid',
    text: '邻里互助',
    icon: 'heart',
    color: '#a55eea',
    action: 'mutual-aid'
  },
  {
    id: 'lost-found',
    text: '失物招领',
    icon: 'search',
    color: '#00d2d3',
    action: 'lost-found'
  },
  {
    id: 'second-hand',
    text: '二手交易',
    icon: 'gift',
    color: '#ffa502',
    action: 'second-hand'
  },
  {
    id: 'more',
    text: '更多服务',
    icon: 'more-circle',
    color: '#747d8c',
    action: 'more'
  }
])

// 公告数据
const announcements = ref([
  {
    id: 1,
    title: '关于小区电梯维修的通知',
    time: '2025-01-21 10:30',
    isTop: true
  },
  {
    id: 2,
    title: '春节期间物业服务安排',
    time: '2025-01-20 15:20',
    isTop: false
  },
  {
    id: 3,
    title: '小区环境整治活动通知',
    time: '2025-01-19 09:15',
    isTop: false
  }
])

// 热门活动数据
const hotActivities = ref([
  {
    id: 1,
    title: '春节联欢晚会',
    time: '2025-02-10 19:00',
    image: '/static/images/activity1.jpg',
    statusText: '报名中',
    statusType: 'success'
  },
  {
    id: 2,
    title: '社区健康讲座',
    time: '2025-01-25 14:00',
    image: '/static/images/activity2.jpg',
    statusText: '即将开始',
    statusType: 'warning'
  }
])

// 便民服务数据
const convenienceServices = ref([
  {
    id: 1,
    name: '快递代收',
    description: '提供快递代收服务，方便居民取件',
    icon: 'package',
    color: '#3742fa'
  },
  {
    id: 2,
    name: '家政服务',
    description: '专业家政服务，清洁、维修等',
    icon: 'home',
    color: '#2ed573'
  },
  {
    id: 3,
    name: '维修服务',
    description: '水电维修、家具维修等',
    icon: 'tools',
    color: '#ff9500'
  },
  {
    id: 4,
    name: '医疗服务',
    description: '社区医疗咨询和基础医疗服务',
    icon: 'heart-pulse',
    color: '#ff4757'
  }
])

// 处理轮播图点击
const handleBannerClick = (index) => {
  const banner = bannerList.value[index]
  if (banner.url) {
    uni.navigateTo({
      url: banner.url
    })
  }
}

// 处理服务点击
const handleService = (service) => {
  switch (service.action) {
    case 'announcement':
      uni.navigateTo({ url: '/pages/services/announcement' })
      break
    case 'activity':
      uni.navigateTo({ url: '/pages/services/activity' })
      break
    case 'service':
      uni.navigateTo({ url: '/pages/services/convenience' })
      break
    case 'group-buy':
      uni.navigateTo({ url: '/pages/services/group-buy' })
      break
    case 'mutual-aid':
      uni.navigateTo({ url: '/pages/services/mutual-aid' })
      break
    case 'lost-found':
      uni.navigateTo({ url: '/pages/services/lost-found' })
      break
    case 'second-hand':
      uni.navigateTo({ url: '/pages/services/second-hand' })
      break
    case 'more':
      uni.showToast({
        title: '更多服务开发中',
        icon: 'none'
      })
      break
  }
}

// 查看公告详情
const viewAnnouncement = (announcement) => {
  uni.navigateTo({
    url: `/pages/services/announcement-detail?id=${announcement.id}`
  })
}

// 查看活动详情
const viewActivity = (activity) => {
  uni.navigateTo({
    url: `/pages/services/activity-detail?id=${activity.id}`
  })
}

// 处理便民服务
const handleConvenienceService = (service) => {
  uni.navigateTo({
    url: `/pages/services/convenience-detail?id=${service.id}&name=${service.name}`
  })
}

// 页面加载时初始化数据
onMounted(() => {
  // 暂时允许所有用户访问所有页面
  // TODO: 后续根据具体需求设置权限控制
  console.log('社区服务页面加载完成')
})
</script>

<style lang="scss" scoped>
.services-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

.banner-section {
  margin-bottom: 16px;
  
  :deep(.u-swiper) {
    border-radius: 12px;
    margin: 0 16px;
  }
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 16px;
  margin-bottom: 20px;
  
  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    
    &:active {
      transform: scale(0.95);
    }
    
    .service-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }
    
    .service-text {
      font-size: 12px;
      color: #333;
      text-align: center;
    }
  }
}

.dynamic-menu-section {
  margin: 0 16px 16px;
  
  :deep(.u-card) {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.announcement-section,
.activity-section,
.convenience-section {
  margin: 0 16px 16px;
  
  :deep(.u-card) {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.announcement-list {
  .announcement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .announcement-content {
      flex: 1;
      
      .announcement-title {
        display: block;
        font-size: 14px;
        color: #333;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .announcement-time {
        font-size: 12px;
        color: #999;
      }
    }
    
    .announcement-badge {
      margin-left: 8px;
    }
  }
}

.activity-list {
  .activity-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .activity-image {
      width: 80px;
      height: 60px;
      border-radius: 8px;
      margin-right: 12px;
    }
    
    .activity-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .activity-title {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        margin-bottom: 4px;
      }
      
      .activity-time {
        font-size: 12px;
        color: #999;
        margin-bottom: 4px;
      }
      
      .activity-status {
        align-self: flex-start;
      }
    }
  }
}

.convenience-list {
  .convenience-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .service-info {
      display: flex;
      align-items: center;
      flex: 1;
      
      .service-details {
        margin-left: 12px;
        
        .service-name {
          display: block;
          font-size: 14px;
          color: #333;
          font-weight: 500;
          margin-bottom: 4px;
        }
        
        .service-desc {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 480px) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 12px;
  }
  
  .announcement-section,
  .activity-section,
  .convenience-section {
    margin: 0 12px 12px;
  }
}
</style> 